<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>参考文章：来着掘金https://juejin.cn/post/7089997204252786702</title>
	</head>
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
			background-color: #222;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}

		.checklist {
			padding: 40px;
			position: relative;
			background: pink;
			width: 300px;
		}

		.checklist label {
			position: relative;
			display: block;
			margin: 40px 0;
			color: #fff;
			font-size: 24px;
			cursor: pointer;
		}

		.checklist input[type="checkbox"] {
			-webkit-appearance: none;
		}

		.checklist i {
			position: absolute;
			top: 2px;
			display: inline-block;
			width: 25px;
			height: 25px;
			border: 2px solid #fff;
		}

		.checklist input[type="checkbox"]:checked~i {
			top: 1px;
			height: 15px;
			width: 25px;
			border-top: none;
			border-right: none;
			transform: rotate(-45deg);
		}

		.checklist span {
			position: relative;
			left: 40px;
			transition: 0.5s;
		}

		.checklist span:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 1px;
			background: #fff;
			transform: translateY(-50%) scaleX(0);
			transform-origin: left;
			transition: transform 0.5s;
		}

		.checklist input[type="checkbox"]:checked~span:before {
			transform: translateY(-50%) scaleX(1);
			transform-origin: right;
			transition: transform 0.5s;
		}

		.checklist input[type="checkbox"]:checked~span {
			color: #154e6b;
		}
	</style>
	<body>
		<div class="checklist">
			<label>
				<input type="checkbox" name="" id="" />
				<i></i>
				<span>1.吃饭</span>
			</label>
			<label>
				<input type="checkbox" name="" id="" />
				<i></i>
				<span>2.睡觉</span>
			</label>
			<label>
				<input type="checkbox" name="" id="" />
				<i></i>
				<span>3.学习</span>
			</label>
		</div>
	</body>
</html>
